<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="outer">
        <button>输入法</button>
        <ul id="ime">
          <li>
            <a href="javascript:;">手写</a>
          </li>
          <li>
            <a href="javascript:;">拼音</a>
          </li>
          <li id="close">
            <a href="javascript:;">关闭</a>
          </li>
        </ul>
      </div>
</body>
</html>
<script>
    window.onload = function() {
      var oBtn = document.getElementsByTagName("button")[0];
      var oIme = document.getElementById("ime");
      var oClose = document.getElementById("close");
      var style = oIme.style;
      oBtn.onclick = function() {
        style.display = style.display == "block" ? "none" : "block";
      };
    
      oClose.onclick = function() {
        style.display = "none";
      };
    };
    </script>
    <style>
        body,
        ul,
        li,
        button {
          margin: 0;
          padding: 0;
        }
        body {
          font: 12px/1.5 Tahoma;
        }
        ul {
          list-style-type: none;
        }
        button {
          cursor: pointer;
        }
        #outer {
          width: 70px;
          margin: 10px auto;
        }
        #ime {
          margin-top: 5px;
          background: #fff;
          border: 1px solid #9a99ff;
          display: none;
        }
        #ime li {
          width: 100%;
          line-height: 24px;
          display: inline-block;
          vertical-align: top;
        }
        #close {
          border-top: 1px solid #9a99ff;
        }
        #ime li a {
          color: #00c;
          padding: 0 5px;
          display: block;
          text-decoration: none;
        }
        #ime li a:hover {
          background: #d9e1f6;
        }
        </style>